<template>
  <div class="rundeck-info-widget">
    <div class="rundeck-info-widget__group">
      <div class="rundeck-info-widget__more-link">
        <a :href="welcomeUrl()" data-test-id="welcome-link">
          <RundeckLogo v-if="appInfo.title === 'Rundeck'" />
          <PagerdutyLogo v-else />
        </a>
      </div>
      <ui-socket section="rundeck-info-widget" location="version-info">
        <div v-if="version && appInfo" class="rundeck-info-widget__header">
          <RundeckVersion
              :logo="false"
              :title="appInfo.title"
              :logocss="appInfo.logocss"
              :number="version.number"
              :tag="version.tag"
          />
        </div>
        <div v-if="version && version.icon && version.color">
          <VersionDisplay
              :text="`${version.name} ${version.color} ${version.icon}`"
              :icon="version.icon"
              :color="version.color"
          />
        </div>
      </ui-socket>
      <div v-if="server">
        <span class="server-display">
          <ServerDisplay
              :name="server.name"
              :glyphicon="server.icon"
              :uuid="server.uuid"
          />
        </span>
      </div>
    </div>
    <ui-socket section="rundeck-info-widget" location="latest-info">
      <div
          v-if="latest"
          class="rundeck-info-widget__group"
          style="border-top: solid 1px grey"
      >
        <div class="rundeck-info-widget__heading">Latest Release</div>
        <div class="rundeck-info-widget__latest">
          <RundeckVersion
              :logo="false"
              :number="latest.full"
              :tag="latest.tag"
          />
        </div>
      </div>
    </ui-socket>
    <div
        class="rundeck-info-widget__group"
        style="display: flex; flex-direction: column-reverse; flex-grow: 1"
    >
      <Copyright />
    </div>
  </div>
</template>

<script lang="ts">
import { url } from "../../../rundeckService";

import RundeckLogo from "../../svg/RundeckLogo.vue";
import PagerdutyLogo from "../../svg/PagerdutyLogo.vue";

import Copyright from "../../version/Copyright.vue";
import RundeckVersion from "../../version/RundeckVersionDisplay.vue";
import VersionDisplay from "../../version/VersionIconNameDisplay.vue";
import ServerDisplay from "../../version/ServerDisplay.vue";
import { defineComponent } from "vue";
import { AppInfo, ServerInfo, VersionInfo } from "../../../stores/System";
import type { PropType } from "vue";
import { Release } from "../../../stores/Releases";
import UiSocket from "../../../../library/components/utils/UiSocket.vue";
export default defineComponent({
  name: "RundeckInfo",
  components: {
    RundeckLogo,
    PagerdutyLogo,
    Copyright,
    RundeckVersion,
    VersionDisplay,
    ServerDisplay,
    UiSocket,
  },
  props: {
    version: {
      type: Object as PropType<VersionInfo>,
    },
    latest: {
      type: Object as PropType<Release>,
    },
    server: {
      type: Object as PropType<ServerInfo>,
    },
    appInfo: {
      type: Object as PropType<AppInfo>,
    },
  },
  methods: {
    welcomeUrl() {
      return url("menu/welcome").toString();
    },
  },
});
</script>

<style scoped lang="scss">
.rundeck-info-widget {
  display: flex;
  align-content: center;
  flex-direction: column;
  padding: 15px;
  width: 400px;
  overflow: hidden;

  > div:not(:first-child) {
    margin-top: 10px;
    padding-top: 10px;
  }

  &__more-link {
    display: flex;
    width: 100%;
    align-content: center;
    align-items: center;
    justify-content: center;
    a {
      width: 80%;
      display: block;
    }
  }

  &__latest * {
    font-size: 18px;
  }
}

.rundeck-info-widget__group {
  > :not(:first-child) {
    margin-top: 10px;
  }
}

.rundeck-info-widget__heading {
  font-weight: bold;
}
</style>
